@contextHeaderBorderColor: rgba(128, 128, 128, 0.2);
@contextHeaderBorderRadius: 3px;
@resizeWrapperSize: 20px;
@resizeIconSize: 8px;

.context-anchor-wrapper {
  height: 100%;
  margin-bottom: 5px;
  :global {
    .ant-anchor-link {
      padding: 7px 0 7px 6px;
    }
    .ant-card-bordered {
      height: 100%;
    }
    .ant-collapse-header {
      padding: 2px 2px 2px 30px !important;
    }
    .ant-collapse-content-box {
      padding-top: 2px !important;
    }
  }

  .header {
    background: var(--component-background) !important;
    border-bottom: var(--border-width-base) var(--border-style-base) @contextHeaderBorderColor;
    border-top-left-radius: @contextHeaderBorderRadius;
    border-top-right-radius: @contextHeaderBorderRadius;
  }

  .unload-wrapper {
    background-color: var(--component-background);
  }

  .render-item-wrapper {
    .rnd {
      position: relative !important;
      overflow: hidden;
      background-color: var(--component-background);

      &-resizing {
        border: 1px solid var(--link-active-color);

        &__tip {
          position: absolute;
          right: @resizeIconSize + 3 * 2;
          bottom: 3px;
          z-index: 9999;
          display: none;
          color: var(--error-color);

          &__show {
            display: inline;
          }
        }
      }
    }

    .render-item-content {
      .skeleton-wrapper {
        padding: 10px;
        overflow: hidden;
      }
    }

    .render-item-content {
      .skeleton-wrapper {
        padding: 10px;
        overflow: hidden;
      }
    }

    .resize-wrapper {
      position: absolute;
      right: 0;
      bottom: 0;
      width: @resizeIconSize + 3;
      height: @resizeIconSize + 3;

      .resize-handle {
        position: absolute;
        right: 3px !important;
        bottom: 3px !important;
        display: inline-block;
        width: @resizeIconSize !important;
        height: @resizeIconSize !important;
        border-right: 2px solid rgba(0, 0, 0, 0.4);
        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
        cursor: ns-resize !important;

        &__down {
          cursor: s-resize !important;
        }

        &__up {
          cursor: n-resize !important;
        }
      }
    }

    .resize-mask {
      position: fixed;
      z-index: 99999;
      &:hover {
        cursor: ns-resize;
      }
    }
  }

  .render-title-wrapper {
    display: inline !important;
    padding: 0 !important;

    .count {
      display: inline !important;
      padding: 0 5px;
      color: #ffffff;
      font-size: 12px;
      line-height: 16px;
      background: var(--error-color);
      border-radius: 8px;
    }
  }

  .ant-collapse-header {
    padding: 2px;
  }
}
